<!--  -->
<template>
    <div>
        <el-form :inline="true"   label-width="80px">
            <el-form-item label="类型"  >
                <el-select  class="crawler_input" v-model="value" placeholder="请选择" @change="showEcharts">
                    <el-option key="num" label="所有" value="num"> </el-option>
                    <el-option key="chNum" label="中文文献" value="chNum"> </el-option>
                    <el-option key="enNum" label="外文文献" value="enNum"> </el-option>
                  </el-select>
            </el-form-item>
        
            <el-form-item label="年份" >
                <el-date-picker
                    class="crawler_input"
                    @change="showEcharts"
                    v-model="time"
                    type="year"
                    value-format="yyyy"
                    placeholder="选择年">
                </el-date-picker>
            
            </el-form-item>
          </el-form>
        <div id="container" style="height: 800px;width:800px;margin:auto"></div>
    </div>
    
</template>

<script>
import { statisticalanalysisApi } from '@/api/statisticalanalysis';
import * as echarts from 'echarts';
export default {
    data() {
        //这里存放数据
        return {
            value:"chNum",
            time:'2021'
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        //TODO bug 改变数据时有问题
        showEcharts() {
            let doc = document.getElementById('container')
            // doc.removeAttribute("style")
           
            if(doc.getAttribute("_echarts_instance_")!=null){
                doc.removeAttribute("_echarts_instance_")
            }
            // dom.removeAttribute("_echarts_instance_")
            let myChart = echarts.init(doc, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            let option;
            let data={
                year:this.time,
                order:this.value,
                isAsc:'false'
            }

            statisticalanalysisApi.getEchartsData(data).then(({data})=>{
                option = {
                title: {
                    text: '高校文献发表数量柱状图',
                    align: "center"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: data.yAxisData
                },
                series: data.series
            };
            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }

            window.addEventListener('resize', myChart.resize);
            })

            
            

            
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        
        this.showEcharts()

    },
    //beforeCreate() {}, //生命周期 - 创建之前
    //beforeMount() {}, //生命周期 - 挂载之前
    //beforeUpdate() {}, //生命周期 - 更新之前
    //updated() {}, //生命周期 - 更新之后
    //beforeDestroy() {}, //生命周期 - 销毁之前
    //destroyed() {}, //生命周期 - 销毁完成
    //activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>